<script setup lang="ts">
  import { onMounted, ref } from "vue"
  import type { UploadProps, UploadRawFile, UploadInstance } from 'element-plus'
  import { genFileId } from 'element-plus'
  import * as xlsx from 'xlsx'
  import { zdDatas } from "@/assets/zdData-ps"

  onMounted(() => {})

  let fileInfo
  const upload = ref<UploadInstance>()
  const changeFile: UploadProps['onChange'] = async (file, uploadFiles) => {
    // 判断文件类型
    if (file?.raw?.name.includes("txt")) {
      fileInfo = await parseTxt(file)
      return
    }
    if (file?.raw?.name.includes("xlsx")) {
      fileInfo = await parseXlsx(file)
      return
    }
  }

  const parseTxt = async (file) => {
    let dataBinary = await new Promise((resolve) => {
      // Web API构造函数FileReader，可实例化对象，去调用其身上方法，去读取解析文件信息
      let reader = new FileReader()
      reader.readAsBinaryString(file.raw) // 读取raw的File文件
      reader.onload = (ev) => {
        resolve(ev.target?.result) // 将解析好的结果扔出去，以供使用
      }
    })
    return dataBinary
  }

  const parseXlsx = async (file) => {
    let dataBinary = await new Promise((resolve) => {
      let reader = new FileReader()
      reader.readAsBinaryString(file.raw)
      reader.onload = (ev) => {
        resolve(ev.target?.result)
      }
    })
    let workBook = xlsx.read(dataBinary, { type: "binary", cellDates: true })
    let workSheet1 = workBook.Sheets[workBook.SheetNames[0]]
    let workSheet2 = workBook.Sheets[workBook.SheetNames[1]]
    let workSheet3 = workBook.Sheets[workBook.SheetNames[2]]
    // 分为第一行的数据，和第一行下方的数据
    const data1 = xlsx.utils.sheet_to_json(workSheet1)
    const data2 = xlsx.utils.sheet_to_json(workSheet2)
    const data3 = xlsx.utils.sheet_to_json(workSheet3)
    const nodeIdxs = data1.map((item, idx) => {
      return {
        x: item.X,
        y: item.Z,
        z: item.Y,
        idx
      }
    })
    const lineIdxs = data2.map((item) => {
      if (item["类型"] === "梁单元") {
        return [
          item["节点1"] - 1,
          item["节点2"] - 1
        ]
      }
    }).filter(item => item !== undefined)
    const shapeIdxs = data2.map((item) => {
      if (item["类型"] === "板单元") {
        return [
          item["节点1"] - 1,
          item["节点2"] - 1,
          item["节点3"] - 1,
          item["节点4"] - 1
        ]
      }
    }).filter(item => item !== undefined)
    const zdDatas = data3.map((item, idx) => {
      return {
        x: item.UX,
        y: item.UZ,
        z: item.UY,
        idx
      }
    })
    return {
      nodeIdxs,
      lineIdxs,
      shapeIdxs,
      zdDatas
    }
  }

  const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
  }

  const getInfo = () => {
    console.log(fileInfo)
  }
</script>

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action=""
      :auto-upload="false"
      :limit="1"
      :on-exceed="handleExceed"
      :on-change="changeFile"
    >
      <el-button type="primary">上传文件</el-button>
    </el-upload>
    <el-button type="primary" @click="getInfo">获取信息</el-button>
  </div>
</template>

<style scoped>

</style>